<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flexbox 多行</title>
	<style type="text/css">
		.flexbox {
			display: flex;
			background: #DCDEE0;
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.item {
			width: 100px;
			background: #0365C0;
			margin: 10px;
			color: #fff;
			text-align: center;
			line-height: 100px;
		}
		.item:nth-child(2n) {
			padding-bottom: 50px;
			width: 150px;
		}
	</style>
</head>
<body>
	<div class="flexbox">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
		<div class="item">6</div>
		<div class="item">7</div>
		<div class="item">8</div>
		<div class="item">9</div>
		<div class="item">10</div>
		<div class="item">11</div>
		<div class="item">12</div>
		<div class="item">13</div>
		<div class="item">14</div>
		<div class="item">15</div>
	</div>
</body>
</html>





